<template>
  <div class="page">
    <el-autocomplete
      v-model="queryInp"
      :fetch-suggestions="querySuggestion"
      placeholder="请输入关键词、专利名称、专利号等专利信息进行查询"
      :trigger-on-focus="false"
      @select="handleQueryInpSelect"
      @keyup.enter.native="search"
      class="query-inp">
      <template slot="append">
        <i class="el-input__icon el-icon-search"></i>
      </template>
    </el-autocomplete>
    <!-- 筛选项 -->
    <div class="screen-box">
      <ul>
        <li>
          <span class="tit">行业分类：</span>
          <p class="content">
            <span v-for="(item, index) in industryArr" :key="index" :class="{active: industryActive === index}">{{item.label}}</span>
          </p>
        </li>
        <li>
          <span class="tit">所有权限：</span>
          <p class="content">
            <span v-for="(item, index) in permissionsArr" :key="index" :class="{active: permissionsActive === index}">{{item.label}}</span>
          </p>
        </li>
        <li>
          <span class="tit">专利类型：</span>
          <p class="content">
            <span v-for="(item, index) in patentTypeArr" :key="index" :class="{active: patentTypeActive === index}">{{item.label}}</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 检索列表 -->
    <div class="result-box">
      <div class="tools">
        <p class="left">
          <span>发布时间<i class="el-icon-caret-bottom"></i></span>
          <span>专利得分<i class="el-icon-caret-bottom"></i></span>
          <span>只看关注</span>
          <span>只看未关注</span>
        </p>
        <p class="right">
          <span>
            <i class="el-icon-menu" :class="{active: curMode === 0}" @click="curMode=0"></i>
            <i class="el-icon-date" :class="{active: curMode === 1}" @click="curMode=1"></i>
          </span>
          <span><i class="el-icon-caret-left prev"></i><i class="el-icon-caret-right next"></i></span>
        </p>
      </div>
      <div class="list-box">
        <template v-if="curMode === 0">
          <ModeA :data="modeData"/>
        </template>
        <template v-if="curMode === 1">
          <ModeB :data="modeData"/>
        </template>
      </div>
      
    </div>
  </div>
</template>

<script>
import ModeA from './mode/ModeA'
import ModeB from './mode/ModeB'
export default {
  data() {
    return {
      queryInp: '',
      industryArr: [],
      permissionsArr: [],
      patentTypeArr: [],
      industryActive: 0,
      permissionsActive: 0,
      patentTypeActive: 0,
      queryParam: {
        industry: '',
        permissions: '',
        patentType: ''
      },
      curMode: 0,
      modeData: []
    }
  },
  components: {
    ModeA,
    ModeB
  },
  methods: {
    init() {
      this.industryArr = [
        {
          label: '不限',
          code: ''
        },
        {
          label: '能源',
          code: ''
        },
        {
          label: '工业',
          code: ''
        },
        {
          label: '商贸',
          code: ''
        },
        {
          label: '金融',
          code: ''
        },
        {
          label: '房地产',
          code: ''
        },
        {
          label: '医疗保健',
          code: ''
        },
        {
          label: '信息技术',
          code: ''
        },
        {
          label: '电信业务',
          code: ''
        },
        {
          label: '公用事业',
          code: ''
        },
        {
          label: '日常消费品',
          code: ''
        },
        {
          label: '非日常生活消费品',
          code: ''
        },
      ]
      this.permissionsArr = [
        {
          label: '不限',
          code: ''
        },
        {
          label: '非独家',
          code: ''
        },
        {
          label: '独家',
          code: ''
        },
      ]
      this.patentTypeArr = [
        {
          label: '不限',
          code: ''
        },
        {
          label: '外观设计',
          code: ''
        },
        {
          label: '实用新型',
          code: ''
        },
        {
          label: '发明专利',
          code: ''
        },
      ]
      this.modeData = [
        {
          name: '基于指纹识别技术得票据保险箱',
          patentType: '实用新型',
          pingfen: 50,
          date: '2016-11-02',
          type: '授权',
          pn: 'CN106068517A'
        },
        {
          name: '一种结构紧凑的光源系统',
          patentType: '发明专利',
          pingfen: 52,
          date: '2017-09-22',
          type: '授权',
          pn: 'CN105676578B'
        },
        {
          name: '光源系统及相关投影系统',
          patentType: '实用新型',
          pingfen: 54,
          date: '2017-05-17',
          type: '授权',
          pn: 'CN104865783B'
        },
        {
          name: '充电器（BLJ-12W）',
          patentType: '外观设计',
          pingfen: 54,
          date: '2020-08-18',
          type: '授权',
          pn: 'CN305996303S'
        },
        {
          name: '一种自动控制开关灯电路',
          patentType: '实用新型',
          pingfen: 54,
          date: '2019-11-05',
          type: '授权',
          pn: 'CN209593831U'
        },
      ]
    },
    search() {

    },
    querySuggestion(queryString, cb) {
      let results = [22]
      cb(results)
    },
    handleQueryInpSelect() {

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.page {
  text-align: left;
  .query-inp {
    position: relative;
    width: 100%;
    max-width: 800px;
  }
  .screen-box {
    position: relative;
    width: 100%;
    margin: 10px 0;
    background-color: #fff;
    ul {
      list-style: none;
      li {
        position: relative;
        display: block;
        width: 100%;
        .tit {
          position: absolute;
          top: 4px;
          left: 13px;
          width: 60px;
          line-height: 30px;
          font-size: 12px;
        }
        .content {
          position: relative;
          padding-left: 73px;
          span {
            display: inline-block;
            line-height: 30px;
            padding: 4px 10px;
            border-radius: 4px;
            margin-right: 10px;
            margin-bottom: 4px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            &.active {
              color: #514bad;
            }
          }
        }
      }
    }
  }
  .result-box {
    position: relative;
    width: 100%;
    .tools {
      position: relative;
      height: 40px;
      background-color: #fff;
      > p {
        position: relative;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
      }
      .left {
        float: left;
        span {
          display: inline-block;
          width: 90px;
          text-align: center;
          cursor: pointer;
        }
      }
      .right {
        float: right;
        margin-right: 20px;
        span {
          display: inline-block;
          margin-left: 10px;
          text-align: center;
          font-size: 24px;
          cursor: pointer;
          i {
            display: inline-block;
            width: 40px;
            &.prev, &.next {
              width: 30px;
            }
            &.active {
              font-weight: bold;
              color: #514bad;
            }
          }
        }
      }
    }
    .list-box {
      position: relative;
      width: 100%;
      padding: 10px 0;
      background-color: #fff;
    }
  }
}

</style>